<template>
    <div>
        <div class="header-nav" v-show="scrolled">
            <div class="header-nav-left" @click="goBack"><i class="mintui mintui-back"></i>返回</div>
           {{title}}
        </div>
        <div class="hader-nav-scroll" v-show="!scrolled">
            <div class="header-nav-left" @click="goBack"><i class="mintui mintui-back"></i>返回</div>
            {{title}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "header",
        data(){
          return{
              scrolled:true
          }
        },
        props:['title'],
        mounted(){
            window.addEventListener('scroll', this.handleScroll);
        },
        methods:{
            goBack(){
                window.history.back();
            },
            handleScroll () {
                this.scrolled = window.scrollY < 44;
            }
        },
        ready(){
            window.addEventListener('scroll', this.handleScroll);
        }
    }
</script>

<style scoped>
        .header-nav{width: 100%;height: 2.5em;border-bottom: #bbbbbb;box-shadow: 0px 2px 1px 0px #bbbbbb;font-size: 16px;line-height: 2.4em;text-align: center;position: relative;background: #E6E6E6;z-index:50 }
        .header-nav-left{float: left;text-align: left;position: absolute;left:1px;}
        .hader-nav-scroll{width: 100%;height: 2.5em;border-bottom: #bbbbbb;box-shadow: 0px 2px 1px 0px #bbbbbb;font-size: 16px;line-height: 2.4em;text-align: center;position: fixed;background: #E6E6E6;z-index: 50}
</style>